<template>
  <div class="lum-dialog-mask">
    <el-container class="lum-dialog-box" v-outside="close">
      <el-header class="no-padding header no-select" height="60px">
        <p>{{ from.groupId == 0 ? '创建群组' : '请选择需要邀请的好友' }}</p>
        <p class="tools">
          <el-icon @click="close"><ele-Close /></el-icon>
        </p>
      </el-header>
      <el-main class="main no-padding">
        <el-container class="full-height">
          <el-aside width="250px" class="aside-border">
            <el-container class="full-height no-select">
              <el-header
                class="no-padding search-header"
                height="50px"
                :class="{ shadow: searchHeaderShadow }"
              >
                <el-input
                  v-model="keywords"
                  placeholder="搜索 | 好友 or 群组"
                  :prefix-icon="Search"
                  clearable
                  size="default"
                />
              </el-header>
              <el-main class="no-padding">
                <el-scrollbar
                  ref="scrollbar"
                  class="full-height"
                  tag="section"
                  :native="false"
                >
                  <ul class="friend-items no-select">
                    <li v-for="item in search" :key="item.id" @click="triggerContacts(item)">
                      <div class="avatar">
                        <el-avatar :size="25" :src="item.avatar" shape="square">
                          <img :src="detaultAvatar" />
                        </el-avatar>
                      </div>
                      <div class="content"><span class="lum-text-ellipsis">{{ item.nickname }}</span></div>
                      <div class="checkbox">
                        <el-icon :color="item.checked ? 'var(--el-color-primary)' : '#ccc'"><ele-SuccessFilled /></el-icon>
                      </div>
                    </li>
                  </ul>
                </el-scrollbar>
              </el-main>
            </el-container>
          </el-aside>

          <el-main class="no-padding">
            <el-container class="full-height">
              <el-header height="50px" v-show="!readonly">
                <div class="group-from no-select">
                  <label>群名称<span class="dotted">*</span></label>
                  <p>
                    <el-input
                      v-model="from.groupName"
                      placeholder="请输入群名称(必填)"
                      size="default"
                      :maxlength="20"
                    />
                  </p>
                </div>
              </el-header>
              <el-header height="40px" :class="{ mt40: !readonly }">
                <el-divider content-position="left" class="no-select">
                  <span style="color: #c4c5c7">
                    邀请成员 ({{ selected.length }})
                  </span>
                </el-divider>
              </el-header>
              <el-main>
                <el-scrollbar :native="false" tag="section" class="full-height">
                  <ul class="friend-items no-select">
                    <li
                      v-for="item in selected"
                      :key="item.id"
                      @click="triggerContacts(item)"
                      style="padding: 0;"
                    >
                      <div class="avatar">
                        <el-avatar :size="25" :src="item.avatar" shape="square">
                          <img :src="detaultAvatar" />
                        </el-avatar>
                      </div>
                      <div class="content"><span class="lum-text-ellipsis">{{ item.nickname }}</span></div>
                      <div class="checkbox">
                        <el-icon :color="item.checked ? 'var(--el-color-primary)' : '#ccc'"><ele-SuccessFilled /></el-icon>
                      </div>
                    </li>
                  </ul>
                </el-scrollbar>
              </el-main>
            </el-container>
          </el-main>
        </el-container>
      </el-main>
      <el-footer height="50px" class="no-padding footer">
        <el-button size="small" @click="close" plain>取消</el-button>
        <el-button v-if="from.groupId == 0" type="primary" size="small" @click="createSubmit">创建群组<span v-show="selected.length">({{ selected.length }})</span></el-button>
        <el-button v-else type="primary" size="small" @click="inviteSubmit">立即邀请({{ selected.length }})</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { computed, reactive, toRefs, watch, onMounted, ref } from 'vue'
import { useChatApi } from '/@/api/chat/index'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import detaultAvatar from '/@/assets/detault-avatar.jpg';

export default {
    name: 'GroupLaunch',
    props: {
        groupId: {
            type: [String, Number],
            default: null,
        }
    },
    setup(props, context) {
        const chatApi = useChatApi()
        const { groupId } = toRefs(props)
        const state = reactive({
            readonly: false,
            from: {
                groupId: 0,
                groupName: '',
            },
            contacts: [],
            search: [],
            searchHeaderShadow: false,
            keywords: '',
            isAvatarCropper: false
        })
        const scrollbar = ref()
        const selected = computed(() => {
            return state.contacts.filter(item => item.checked)
        })
        // 触发选择联系人事件
        const triggerContacts = (item) => {
            let index = state.contacts.findIndex(val => {
                return val.id === item.id
            })
            state.contacts[index].checked = !state.contacts[index].checked
        }
        // 取消选中的联系人
        const delContacts = (item) => {
            let index = state.contacts.findIndex(val => {
                return val.id === item.id
            })
            state.contacts[index].checked = false
        }
        // 移除所有选中选项
        const delAll = () => {
            state.contacts.forEach((item, i) => {
                state.contacts[i].checked = false
            })
        }
        // 关闭窗口
        const close = () => {
            context.emit('close')
        }
        // 获取选中的ID列表
        const getIds = () => {
            return selected.value.map(item => item.id)
        }
        // 加载好友列表
        const friendsApi = () => {
            chatApi.ServeGetInviteFriends({
                group_id: state.from.groupId,
            }).then(res => {
                if (res.code == 0 && res.data) {
                state.contacts = []
                let data = res.data.map(item => {
                    return Object.assign(item, {
                        nickname: item.friend_remark ? item.friend_remark : item.nickname,
                        checked: false,
                    })
                })
                 state.contacts.push(...data)
                }
            })
        }
        //创建聊天群
        const createSubmit = () => {
            let data = {
                group_avatar: '',
                group_name: state.from.groupName,
                group_profile: '',
                uids: getIds().join(','),
            }
            if (data.group_name == '') {
                ElMessage.error('群聊名称不能为空！')
                return
            }
            if (getIds().length < 2) {
                ElMessage.error('群聊人数必须大于俩人！')
                return
            }
            chatApi.ServeCreateGroup({
                avatar: '',
                name: state.from.groupName,
                profile: '',
                ids: getIds().join(','),
            }).then(res => {
                if (res.code == 0) {
                    context.emit('create-success', res.data)
                } else {
                    ElMessage.error('创建群聊失败！')
                }
            })
        }
        //好友邀请提交
        const inviteSubmit = () => {
            chatApi.ServeInviteGroup({
                group_id: parseInt(state.from.groupId),
                ids: getIds().join(','),
            }).then(res => {
                if (res.code == 0) {
                  context.emit('invite-success')
                } else {
                  ElMessage.error('邀请好友失败！')
                }
            })
        }
        // 滚动条监听
        const handleScroll = () => {
            let scrollbarEl = scrollbar.value.wrap
            scrollbarEl.onscroll = () => {
                state.searchHeaderShadow = scrollbarEl.scrollTop != 0
            }
        }
        watch(() => state.keywords,
            val => {
                state.search =
                    val == ''
                    ? state.contacts
                    : state.contacts.filter(item => {
                    return item.nickname.match(state.keywords) != null
                })
            }
        )
        watch(() => state.contacts,
            arr => {
                if(state.keywords == ''){
                    state.search = arr
                }
            }
        )
        onMounted(() => {
            if(groupId.value) {
                state.readonly = true
                state.from.groupId = groupId.value
            }
            friendsApi()
        })
        return {
            ...toRefs(state),
            selected,
            scrollbar,
            triggerContacts,
            delContacts,
            delAll,
            close,
            getIds,
            friendsApi,
            createSubmit,
            inviteSubmit,
            handleScroll,
            Search,
            detaultAvatar
        }
    }
}
</script>

<style lang="scss" scoped>
:deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
}

.lum-dialog-box {
  width: 650px;
  max-width: 650px;
  height: 550px;

  .main {
    .aside-border {
      border-right: 1px solid #f5eeee;
    }
  }

  .footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
    border-top: 1px solid #f5eeee;
  }
}

.search-header {
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;

  &.shadow {
    box-shadow: 0 2px 6px 0 rgba(31, 35, 41, 0.05);
  }
}

.friend-items {
  li {
    height: 40px;
    padding: 0 8px;
    box-sizing: border-box;
    margin: 2px 0;
    display: flex;
    flex-direction: row;
    cursor: pointer;

    > div {
      height: 100%;
      display: flex;
      align-items: center;
    }

    .avatar {
      width: 40px;
      justify-content: center;
      flex-shrink: 0;
    }

    .content {
      flex: 1 auto;
      padding-left: 8px;
      overflow: hidden;
      font-size: 14px;
      font-weight: 400;
      &:hover{
        color: var(--el-color-primary-light-1);
      }
    }

    .checkbox {
      flex-shrink: 0;
      width: 20px;
      justify-content: center;
    }
  }
}

.group-from {
  label {
    height: 45px;
    line-height: 47px;
    width: 50px;
    color: #606266;
    padding-right: 3px;
    font-size: 13px;
    .dotted{
      color: var(--el-color-error);
    }
  }

  input {
    height: 25px;
    width: 100%;
    text-indent: 3px;
    color: #a9a4a4;
    font-size: 12px;
    border-bottom: 1px solid #efebeb;
  }
}

.selectd-items {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;

  .selectd-item {
    width: 23%;
    height: 65px;
    margin: 6px 2px 0px 2px;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0px 0px 3px 0 rgba(0, 0, 0, 0.1);

    p {
      width: 90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 10px;
      margin-top: 8px;
      text-align: center;
    }

    .del-mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(31, 35, 41, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      color: white;
      transition: ease 0.5s;
      border-radius: 2px;
    }

    &:hover .del-mask {
      display: flex;
    }
  }
}
.mt40 {
  margin-top: 40px;
}
</style>